<template>
  <!-- 
    自定义进度条组件 AxiomProgress。
    支持线性和圆形两种样式，以及多种颜色主题。
  -->
  <div class="axiom-progress" :class="`axiom-progress--${type}`">
    <!-- 标签 -->
    <div v-if="showLabel && label" class="axiom-progress__label">
      {{ label }}
    </div>
    
    <!-- 线性进度条 -->
    <div v-if="type === 'line'" class="axiom-progress__line">
      <div 
        class="axiom-progress__track"
        :style="{ height: `${strokeWidth}px` }"
      >
        <div 
          class="axiom-progress__bar"
          :class="`axiom-progress__bar--${status}`"
          :style="{
            width: `${normalizedPercentage}%`,
            backgroundColor: color || getStatusColor(status),
            transition: `width ${duration}ms ease`
          }"
        >
          <!-- 条纹动画 -->
          <div v-if="striped" class="axiom-progress__stripes"></div>
        </div>
      </div>
    </div>
    
    <!-- 圆形进度条 -->
    <div v-else-if="type === 'circle'" class="axiom-progress__circle">
      <svg 
        :width="width" 
        :height="width" 
        viewBox="0 0 100 100"
        class="axiom-progress__svg"
      >
        <!-- 背景圆环 -->
        <circle
          cx="50"
          cy="50"
          :r="radius"
          fill="none"
          :stroke-width="relativeStrokeWidth"
          class="axiom-progress__circle-track"
        />
        <!-- 进度圆环 -->
        <circle
          cx="50"
          cy="50"
          :r="radius"
          fill="none"
          :stroke="color || getStatusColor(status)"
          :stroke-width="relativeStrokeWidth"
          :stroke-dasharray="perimeter"
          :stroke-dashoffset="strokeDashoffset"
          stroke-linecap="round"
          class="axiom-progress__circle-bar"
          :class="`axiom-progress__circle-bar--${status}`"
          :style="{ transition: `stroke-dashoffset ${duration}ms ease` }"
        />
      </svg>
      
      <!-- 圆形进度条内容 -->
      <div class="axiom-progress__circle-content">
        <slot name="circle-content">
          <span v-if="showText" class="axiom-progress__circle-text">
            {{ format ? format(percentage) : `${percentage}%` }}
          </span>
        </slot>
      </div>
    </div>
    
    <!-- 仪表盘进度条 -->
    <div v-else-if="type === 'dashboard'" class="axiom-progress__dashboard">
      <svg 
        :width="width" 
        :height="width * 0.75" 
        :viewBox="`0 0 100 75`"
        class="axiom-progress__svg"
      >
        <!-- 背景弧线 -->
        <path
          :d="trackPath"
          fill="none"
          :stroke-width="relativeStrokeWidth"
          class="axiom-progress__dashboard-track"
        />
        <!-- 进度弧线 -->
        <path
          :d="trackPath"
          fill="none"
          :stroke="color || getStatusColor(status)"
          :stroke-width="relativeStrokeWidth"
          :stroke-dasharray="dashboardPerimeter"
          :stroke-dashoffset="dashboardStrokeDashoffset"
          stroke-linecap="round"
          class="axiom-progress__dashboard-bar"
          :class="`axiom-progress__dashboard-bar--${status}`"
          :style="{ transition: `stroke-dashoffset ${duration}ms ease` }"
        />
      </svg>
      
      <!-- 仪表盘内容 -->
      <div class="axiom-progress__dashboard-content">
        <slot name="dashboard-content">
          <span v-if="showText" class="axiom-progress__dashboard-text">
            {{ format ? format(percentage) : `${percentage}%` }}
          </span>
        </slot>
      </div>
    </div>
    
    <!-- 百分比文本（线性进度条） -->
    <div 
      v-if="type === 'line' && showText && textInside === false" 
      class="axiom-progress__text"
    >
      {{ format ? format(percentage) : `${percentage}%` }}
    </div>
    
    <!-- 内部文本（线性进度条） -->
    <div 
      v-if="type === 'line' && showText && textInside" 
      class="axiom-progress__text-inside"
    >
      {{ format ? format(percentage) : `${percentage}%` }}
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
// import { GlobalUtilsMixin } from '@/utils/globalUtils';

export default {
  name: 'AxiomProgress',
  // mixins: [GlobalUtilsMixin],
  props: {
    percentage: {
      type: Number,
      default: 0,
      validator: (value) => value >= 0 && value <= 100
    },
    type: {
      type: String,
      default: 'line',
      validator: (value) => ['line', 'circle', 'dashboard'].includes(value)
    },
    status: {
      type: String,
      default: 'primary',
      validator: (value) => ['primary', 'success', 'warning', 'danger'].includes(value)
    },
    strokeWidth: { type: Number, default: 6 },
    showText: { type: Boolean, default: true },
    textInside: { type: Boolean, default: false },
    width: { type: Number, default: 120 },
    color: { type: String, default: '' },
    striped: { type: Boolean, default: false },
    duration: { type: Number, default: 300 },
    format: { type: Function, default: undefined },
    showLabel: { type: Boolean, default: false },
    label: { type: String, default: '' }
  },
  computed: {
    normalizedPercentage() {
      return Math.max(0, Math.min(100, this.percentage))
    },
    radius() {
      return 50 - this.strokeWidth / 2
    },
    relativeStrokeWidth() {
      return (this.strokeWidth / this.width * 100).toFixed(1)
    },
    perimeter() {
      return 2 * Math.PI * this.radius
    },
    strokeDashoffset() {
      const offset = -1 * this.perimeter * (1 - this.normalizedPercentage / 100) / 2
      return `${offset}px`
    },
    trackPath() {
      const r = this.radius
      const isDashboard = this.type === 'dashboard'
      return `
        M 50 50
        m 0 ${isDashboard ? '' : '-'}${r}
        a ${r} ${r} 0 1 1 0 ${isDashboard ? '-' : ''}${r * 2}
        a ${r} ${r} 0 1 1 0 ${isDashboard ? '' : '-'}${r * 2}
      `
    },
    dashboardPerimeter() {
      return this.perimeter * 0.75
    },
    dashboardStrokeDashoffset() {
      const offset = -1 * this.dashboardPerimeter * (1 - this.normalizedPercentage / 100)
      return `${offset}px`
    }
  },
  methods: {
    getStatusColor(status) {
      const colorMap = {
        primary: 'var(--primary-color)',
        success: 'var(--success-color)',
        warning: 'var(--warning-color)',
        danger: 'var(--danger-color)'
      }
      return colorMap[status] || colorMap.primary
    }
  },
  created() {
    // this.$logger.debug('AxiomProgress 组件初始化', {
    //   percentage: this.percentage,
    //   type: this.type,
    //   status: this.status
    // });
  }
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-progress';
</style>